<!DOCTYPE html>
<!--
/*******************************************************************************
#      ____               __          __  _      _____ _       _               #
#     / __ \              \ \        / / | |    / ____| |     | |              #
#    | |  | |_ __   ___ _ __ \  /\  / /__| |__ | |  __| | ___ | |__   ___      #
#    | |  | | '_ \ / _ \ '_ \ \/  \/ / _ \ '_ \| | |_ | |/ _ \| '_ \ / _ \     #
#    | |__| | |_) |  __/ | | \  /\  /  __/ |_) | |__| | | (_) | |_) |  __/     #
#     \____/| .__/ \___|_| |_|\/  \/ \___|_.__/ \_____|_|\___/|_.__/ \___|     #
#           | |                                                                #
#           |_|                 _____ _____  _  __                             #
#                              / ____|  __ \| |/ /                             #
#                             | (___ | |  | | ' /                              #
#                              \___ \| |  | |  <                               #
#                              ____) | |__| | . \                              #
#                             |_____/|_____/|_|\_\                             #
#                                                                              #
#                              (c) 2010-2011 by                                #
#           University of Applied Sciences Northwestern Switzerland            #
#                     Institute of Geomatics Engineering                       #
#                           martin.christen@fhnw.ch                            #
********************************************************************************
*     Licensed under MIT License. Read the file LICENSE for more information   *
*******************************************************************************/

                      TUTORIAL 8: Usage of the Fly-To Functionality
                      
*******************************************************************************/
-->
<html lang="en">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<script type="text/javascript" src="../../../external/closure-library/closure/goog/base.js"></script>
<script type="text/javascript" src="../../../compiled/deps.js"></script>
<script type="text/javascript">goog.require('owg.OpenWebGlobe');</script>

<script type="text/javascript">



//------------------------------------------------------------------------------
// Render-Event: called every frame:
function OnRender(context)
{
   ogSetTextColor(context,1,1,1);
   ogDrawText(context, "Press 1 to move to a given position", 0, 130);
   ogDrawText(context, "Press 2 to move to a given postion with interpolation of camera orientation", 0, 100);
   ogDrawText(context, "Press 3 to move to a given \"look-at\" Postion", 0, 70);
   ogDrawText(context, "Press 4 to set the animation duration to 1 second.", 0, 40);
   ogDrawText(context, "Press 5 to set the animation duration to 3 seconds.", 0, 10);
   ogSetTextColor(context,1,0,0);
   ogDrawText(context, "Fly-To Animation State: "+text, 800, 10);
}



//------------------------------------------------------------------------------
function OnKeyDown(ctx,key)
{
   var scene = ogGetScene(ctx);

   if(key == 49) // 1 - Fly to Davos
   {
      //normal Fly-To Camera moves to the desired position.
      //camera orientation remains the same.
      
      ogFlyTo(scene,9.821343,46.793029,8000); //scene,longitude,latitude,elevation
      
   }
   if(key == 50) // 2 - Muttenz
   {
      //Fly to a desired position and change the camera orientation by interpolation.
      
      ogFlyTo(scene, 7.650014,47.516667,500,165,-10,0); //scene,longitude,latitude,elevation,yaw,pitch,roll
      
   }
   if(key == 51) // 3 - Basel
   {
      // Fly to a LookAt Position
      // Camera orientation remaines the same. The camera moves to a position where it looks at the
      // desired point from a desired distance.
      // The camera will be moved to a position on a half-sphere with its center at the defined
      // position and its radius given by a defined distance.
      // The position on the half sphere depends on the current camera orientation.
      
      ogFlyToLookAtPosition(scene,7.591127,47.550558,300,10000); //scene,longitude,latitude,elevation,distance in [m]
      
   }  
   if(key == 52) // 4
   {
      //Set the duration of the whole fly-to animation to 1000ms.
      
      ogSetFlightDuration(scene,1000);
      
   }
   if(key == 53) // 5 
   {
      //Set the duration of the whole fly-to animation to 3000ms.
     
      ogSetFlightDuration(scene,3000);
      
   }
}



//------------------------------------------------------------------------------
var text = "In Position";
function flyToAnimationStarted(context)
{
   text = "Moving";
}

function positionReached(context)
{
   text = "In Position";
}


//------------------------------------------------------------------------------
function main()
{
   // (0) Set location of Artwork directory. Because of CORS this can't be local
   // if you want to open this using file://...
   ogSetArtworkDirectory("http://www.openwebglobe.org/art/");
   
   // (1) create an OpenWebGlobe context using canvas
   // first parameter is canvas-id and second is "fullscreen"
   var ctx = ogCreateContextFromCanvas("canvas", true);
   
   // (2) Create a virtual globe
   var globe = ogCreateGlobe(ctx);
   
   // (3) Add an image and an elevation layer
   var imgBlueMarble500 = 
   {
      url     : ["http://www.openwebglobe.org/data/img"],
      layer   : "World500",
      service : "i3d"
   };
   
   var elvSRTM_CH = 
   {
      url     : ["http://www.openwebglobe.org/data/elv"],
      layer   : "SRTM",
      service : "i3d"
   };
   
   ogAddImageLayer(globe, imgBlueMarble500);
   ogAddElevationLayer(globe, elvSRTM_CH);
   

   // (4) Set the "Render-Callback" function.
   // The callback function will be called everytime a frame is drawn.
   ogSetRenderFunction(ctx, OnRender);
   
   
   // (5) Set the mouse down function. We need this for picking!
   ogSetKeyDownFunction(ctx, OnKeyDown);
   
   
   // (6) Set the background color
   ogSetBackgroundColor(ctx, 0.2,0.2,0.7,1);
   
   // (7) get the scene and the world
   var scene = ogGetScene(ctx);   
   var world = ogGetWorld(scene);
   

   // Set the POIs
   var poilayer = ogCreatePOILayer(world,"misc");
   
	var PoiDefinition = 
	{
		icon     :  "http://bit.ly/oMAzAg",
		position :  [9.821343,46.793029,1800],
      flagpole :  true,
      size : 10
	};
	var poi = ogCreatePOI(poilayer, PoiDefinition);
   
   
   var PoiDefinition = 
	{
		icon     :  "http://bit.ly/oMAzAg",
		position :  [7.650014,47.516667,500],
      flagpole :  true,
      size : 10
	};
	var poi = ogCreatePOI(poilayer, PoiDefinition);
   
   
   var PoiDefinition = 
	{
		icon     :  "http://bit.ly/oMAzAg",
		position :  [7.591127,47.550558,300],
      flagpole :  true,
      size : 10
	};
	var poi = ogCreatePOI(poilayer, PoiDefinition);
   
   
   // Retrieve default camera and set it up:
   var camera = ogGetActiveCamera(scene);
   ogSetOrientation(camera,0,-90,0);
   ogSetPosition(camera, 7.366654,46.233333,15000000);
   
   
   // Set the Fly-To Callback functions.
   ogSetFlyToStartedFunction(ctx,flyToAnimationStarted);
   ogSetInPositionFunction(ctx,positionReached);

}
//------------------------------------------------------------------------------
</script>
</head>
<body onload="main()" style="padding:0px; margin:0px; overflow:hidden;">
   <div style="text-align: center">
   <canvas id="canvas"></canvas>          
   </div>
</body>
</html>
